Navigacijos API įvaldymas: vieno puslapio aplikacijų (SPA) maršrutizavimas ir istorijos valdymas

Navigacijos API žymi didelį žingsnį į priekį, kaip mes tvarkome maršrutizavimą ir istorijos valdymą vieno puslapio aplikacijose (SPA). Tradiciniai metodai dažnai remiasi `window.location` objekto manipuliavimu arba trečiųjų šalių bibliotekų naudojimu. Nors šie metodai mums gerai tarnavo, Navigacijos API siūlo paprastesnį, našesnį ir funkcijomis turtingesnį sprendimą, suteikiantį programuotojams didesnę vartotojo navigacijos patirties kontrolę.

Kas yra Navigacijos API?

Navigacijos API yra moderni naršyklės API, skirta supaprastinti ir pagerinti, kaip SPA valdo navigaciją, maršrutizavimą ir istoriją. Ji pristato naują `navigation` objektą, teikiantį metodus ir įvykius, kurie leidžia programuotojams perimti ir valdyti navigacijos įvykius, atnaujinti URL ir palaikyti nuoseklią naršymo istoriją be pilno puslapio perkrovimo. Tai lemia greitesnę, sklandesnę ir jautresnę vartotojo patirtį.

Navigacijos API naudojimo privalumai

• Pagerintas našumas: Panaikinus pilnus puslapio perkrovimus, Navigacijos API žymiai pagerina SPA našumą. Perėjimai tarp skirtingų rodinių tampa greitesni ir sklandesni, o tai lemia labiau įtraukiančią vartotojo patirtį.
• Patobulinta kontrolė: API suteikia smulkiagrūdę navigacijos įvykių kontrolę, leidžiančią programuotojams perimti ir prireikus modifikuoti navigacijos elgseną. Tai apima navigacijos sustabdymą, vartotojų nukreipimą ir pasirinktinės logikos vykdymą prieš arba po navigacijos.
• Supaprastintas istorijos valdymas: Naršyklės istorijos dėklo valdymas tampa lengvesnis su Navigacijos API. Programuotojai gali programiškai pridėti, pakeisti ir naršyti istorijos įrašus, užtikrindami nuoseklią ir nuspėjamą naršymo patirtį.
• Deklaratyvi navigacija: Navigacijos API skatina labiau deklaratyvų požiūrį į maršrutizavimą, leidžiantį programuotojams aiškiai ir glaustai apibrėžti navigacijos taisykles ir elgseną. Tai pagerina kodo skaitomumą ir palaikomumą.
• Integracija su šiuolaikinėmis sistemomis: Navigacijos API yra sukurta taip, kad sklandžiai integruotųsi su šiuolaikinėmis JavaScript sistemomis ir bibliotekomis, tokiomis kaip React, Angular ir Vue.js. Tai leidžia programuotojams išnaudoti API funkcijas savo esamose kūrimo darbo eigose.

Pagrindinės sąvokos ir funkcijos

1. `navigation` objektas

Navigacijos API šerdis yra `navigation` objektas, pasiekiamas per globalų `window` objektą (t. y., `window.navigation`). Šis objektas suteikia prieigą prie įvairių savybių ir metodų, susijusių su navigacija, įskaitant:

• `currentEntry`: Grąžina `NavigationHistoryEntry` objektą, atspindintį dabartinį įrašą navigacijos istorijoje.
• `entries()`: Grąžina `NavigationHistoryEntry` objektų masyvą, atspindintį visus įrašus navigacijos istorijoje.
• `navigate(url, { state, info, replace })`: Nukreipia į naują URL.
• `back()`: Grįžta į ankstesnį istorijos įrašą.
• `forward()`: Eina į priekį į kitą istorijos įrašą.
• `reload()`: Perkrauna dabartinį puslapį.
• `addEventListener(event, listener)`: Prideda įvykių klausytoją su navigacija susijusiems įvykiams.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` sąsaja atspindi vieną įrašą navigacijos istorijoje. Ji suteikia informaciją apie įrašą, pvz., jo URL, būseną ir unikalų ID.

• `url`: Istorijos įrašo URL.
• `key`: Unikalus istorijos įrašo identifikatorius.
• `id`: Kitas unikalus identifikatorius, ypač naudingas sekant navigacijos įvykio gyvavimo ciklą.
• `sameDocument`: Loginė reikšmė, nurodanti, ar navigacija vyksta tame pačiame dokumente.
• `getState()`: Grąžina su istorijos įrašu susietą būseną (nustatytą navigacijos metu).

3. Navigacijos įvykiai

Navigacijos API išsiunčia kelis įvykius, kurie leidžia programuotojams stebėti ir valdyti navigacijos elgseną. Šie įvykiai apima:

• `navigate`: Išsiunčiamas, kai pradedama navigacija (pvz., paspaudus nuorodą, pateikus formą arba iškvietus `navigation.navigate()`). Tai pagrindinis įvykis, skirtas perimti ir apdoroti navigacijos užklausas.
• `navigatesuccess`: Išsiunčiamas, kai navigacija sėkmingai baigiama.
• `navigateerror`: Išsiunčiamas, kai navigacija nepavyksta (pvz., dėl tinklo klaidos arba neapdorotos išimties).
• `currentchange`: Išsiunčiamas, kai pasikeičia dabartinis istorijos įrašas (pvz., naršant pirmyn ar atgal).
• `dispose`: Išsiunčiamas, kai `NavigationHistoryEntry` tampa nebepasiekiamas, pavyzdžiui, kai jis pašalinamas iš istorijos `replaceState` operacijos metu.

Maršrutizavimo įgyvendinimas su Navigacijos API: praktinis pavyzdys

Parodykime, kaip naudoti Navigacijos API, norint įgyvendinti pagrindinį maršrutizavimą paprastoje SPA. Įsivaizduokite aplikaciją su trimis rodiniais: Pradžia, Apie ir Kontaktai.

Pirma, sukurkite funkciją, kuri apdoros maršruto pakeitimus:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Pradžia
Sveiki atvykę į Pradžios puslapį!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Apie
Sužinokite daugiau apie mus.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontaktai
Susisiekite su mumis.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nerasta
Puslapis nerastas.
';
  }
}

Tada pridėkite įvykio klausytoją `navigate` įvykiui:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Sustabdyti numatytąją naršyklės navigaciją

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Išspręsti pažadą po maršruto apdorojimo
  });

  event.transition = promise;
});

Šis kodas perima `navigate` įvykį, išgauna URL iš `event.destination` objekto, sustabdo numatytąją naršyklės navigaciją, iškviečia `handleRouteChange` turiniui atnaujinti ir nustato `event.transition` pažadą. Nustačius `event.transition`, užtikrinama, kad naršyklė lauks, kol turinio atnaujinimas bus baigtas, prieš vizualiai atnaujindama puslapį.

Galiausiai, galite sukurti nuorodas, kurios suaktyvins navigaciją:

Pradžia | Apie | Kontaktai

Ir pridėkite paspaudimo klausytoją toms nuorodoms:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Tai sukuria pagrindinį kliento pusės maršrutizavimą naudojant Navigacijos API. Dabar, paspaudus nuorodas, bus suaktyvintas navigacijos įvykis, kuris atnaujins `content` div turinį be pilno puslapio perkrovimo.

Būsenos valdymo pridėjimas

Navigacijos API taip pat leidžia susieti būseną su kiekvienu istorijos įrašu. Tai naudinga norint išsaugoti duomenis tarp navigacijos įvykių. Pakeiskime ankstesnį pavyzdį, kad jis apimtų būsenos objektą.

Kviečiant `navigation.navigate()`, galite perduoti `state` objektą:

window.navigation.navigate('/about', { state: { pageTitle: 'Apie Mus' } });

`navigate` įvykio klausytojo viduje, galite pasiekti būseną naudodami `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Mano Aplikacija'; // Numatytasis pavadinimas

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Pradžia
Sveiki atvykę į Pradžios puslapį!
';
      title = 'Pradžia';
      break;
    case '/about':
      contentDiv.innerHTML = '
Apie
Sužinokite daugiau apie mus.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontaktai
Susisiekite su mumis.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nerasta
Puslapis nerastas.
';
      title = '404 Nerasta';
  }
  document.title = title;
}

Šiame pakeistame pavyzdyje `handleRouteChange` funkcija dabar priima `state` parametrą ir naudoja jį dokumento pavadinimui atnaujinti. Jei būsena neperduodama, ji pagal nutylėjimą yra 'Mano Aplikacija'.

Naudojant `navigation.updateCurrentEntry()`

Kartais galite norėti atnaujinti dabartinio istorijos įrašo būseną nesuaktyvinant naujos navigacijos. `navigation.updateCurrentEntry()` metodas leidžia tai padaryti. Pavyzdžiui, jei vartotojas pakeičia nustatymą dabartiniame puslapyje, galite atnaujinti būseną, kad atspindėtų šį pakeitimą:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Atnaujintas nustatymas:', setting, 'į', value);
}

// Pavyzdinis naudojimas:
updateUserSetting('theme', 'dark');

Ši funkcija gauna dabartinę būseną, sujungia ją su atnaujintu nustatymu ir tada atnaujina dabartinį istorijos įrašą su nauja būsena.

Pažangūs naudojimo atvejai ir svarstymai

1. Formų pateikimo apdorojimas

Navigacijos API gali būti naudojama formų pateikimui SPA apdoroti, išvengiant pilnų puslapio perkrovimų ir užtikrinant sklandesnę vartotojo patirtį. Galite perimti formos pateikimo įvykį ir naudoti `navigation.navigate()` URL atnaujinimui ir rezultatų rodymui be pilno puslapio perkrovimo.

2. Asinchroninės operacijos

Apdorojant navigacijos įvykius, gali prireikti atlikti asinchronines operacijas, pavyzdžiui, gauti duomenis iš API. `event.transition` savybė leidžia susieti pažadą (promise) su navigacijos įvykiu, užtikrinant, kad naršyklė palauks, kol asinchroninė operacija bus baigta, prieš atnaujindama puslapį. Žiūrėkite pavyzdžius aukščiau.

3. Slinkties pozicijos atkūrimas

Slinkties pozicijos išlaikymas navigacijos metu yra labai svarbus norint užtikrinti gerą vartotojo patirtį. Navigacijos API suteikia mechanizmus slinkties pozicijai atkurti, kai naršoma atgal ar pirmyn istorijoje. Galite naudoti `scroll` savybę `NavigationHistoryEntry` objekte, kad išsaugotumėte ir atkurtumėte slinkties poziciją.

4. Klaidų apdorojimas

Būtina apdoroti klaidas, kurios gali įvykti navigacijos metu, pavyzdžiui, tinklo klaidas arba neapdorotas išimtis. `navigateerror` įvykis leidžia jums sėkmingai pagauti ir apdoroti šias klaidas, apsaugant aplikaciją nuo gedimo ar klaidos pranešimo rodymo vartotojui.

5. Progresyvus tobulinimas

Kuriant SPA su Navigacijos API, svarbu atsižvelgti į progresyvų tobulinimą. Užtikrinkite, kad jūsų aplikacija veiktų teisingai, net jei Navigacijos API nėra palaikoma naršyklėje. Galite naudoti funkcijų aptikimą, kad patikrintumėte, ar egzistuoja `navigation` objektas, ir, jei reikia, grįžti prie tradicinių maršrutizavimo metodų.

Palyginimas su tradiciniais maršrutizavimo metodais

Tradiciniai maršrutizavimo metodai SPA dažnai remiasi `window.location` objekto manipuliavimu arba trečiųjų šalių bibliotekų, tokių kaip `react-router` ar `vue-router`, naudojimu. Nors šie metodai yra plačiai naudojami ir gerai žinomi, jie turi tam tikrų apribojimų:

• Pilni puslapio perkrovimai: Tiesioginis `window.location` manipuliavimas gali sukelti pilnus puslapio perkrovimus, kurie gali būti lėti ir trikdyti vartotojo patirtį.
• Sudėtingumas: Istorijos ir būsenos valdymas tradiciniais metodais gali būti sudėtingas ir linkęs į klaidas, ypač didelėse ir sudėtingose aplikacijose.
• Našumo pridėtinės išlaidos: Trečiųjų šalių maršrutizavimo bibliotekos gali pridėti didelių našumo pridėtinių išlaidų, ypač jei jos nėra optimizuotos konkretiems jūsų aplikacijos poreikiams.

Navigacijos API sprendžia šiuos apribojimus, siūlydama paprastesnį, našesnį ir funkcijomis turtingesnį sprendimą maršrutizavimui ir istorijos valdymui. Ji pašalina pilnus puslapio perkrovimus, supaprastina istorijos valdymą ir suteikia smulkiagrūdę navigacijos įvykių kontrolę.

Naršyklių suderinamumas

2024 m. pabaigoje Navigacijos API yra gerai palaikoma šiuolaikinėse naršyklėse, įskaitant Chrome, Firefox, Safari ir Edge. Tačiau visada gera praktika yra patikrinti naujausią naršyklių suderinamumo informaciją ištekliuose, tokiuose kaip Can I use, prieš įdiegiant Navigacijos API savo gamybinėse aplikacijose. Jei senesnių naršyklių palaikymas yra būtinas, apsvarstykite galimybę naudoti „polyfill“ arba atsarginį mechanizmą.

Išvada

Navigacijos API yra galingas įrankis, skirtas kurti šiuolaikiškas, našias SPA su pažangiomis maršrutizavimo ir istorijos valdymo galimybėmis. Išnaudodami API funkcijas, programuotojai gali sukurti greitesnę, sklandesnę ir labiau įtraukiančią vartotojo patirtį. Nors pradinė mokymosi kreivė gali būti šiek tiek statesnė, palyginti su paprastesniais, senesniais metodais, Navigacijos API privalumai, ypač sudėtingose aplikacijose, daro ją verta investicija. Pasinaudokite Navigacijos API ir atskleiskite visą savo SPA potencialą.

Papildomi mokymosi šaltiniai

• MDN Web Docs: Navigacijos API
• WICG Navigacijos API specifikacija